<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.query" placeholder="客户名称/编码条件" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleQuery" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleAdd" icon="el-icon-plus">添加</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table :data="rows" style="width: 100%;overflow: auto;"  stripe border highlight-current-row v-loading="pageLoading" size="mini">
      <el-table-column label="客户编码" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.customerCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户名称" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="临时表版本号" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.updateVersion }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手动发布版本号" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.handVersion }}</span>
        </template>
      </el-table-column>
      <el-table-column label="自动更新版本号" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.autoVersion }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新临时表" width="100">
        <template slot-scope="scope">
          <el-switch on-text="" off-text=""></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="发送方式" width="140">
        <template slot-scope="scope">
          <span >{{ scope.row.updateTableFlag }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮件通知" width="80">
        <template slot-scope="scope">
          <el-switch on-text="" off-text="" v-model="mytest"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--底部-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--对话框-->
    <el-dialog :title="form && form.id ? '编辑' : '新增' " :visible.sync="formVisible" :close-on-click-modal="false">
      <el-form :model="form" label-width="120px" :rules="rules" ref="form" size="mini" :inline="true">
        <el-form-item label="客户编码" prop="customerCode">
          <el-input v-model="form.customerCode" :disabled="form && form.id ? true : false "/>
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="form.customerName"/>
        </el-form-item>
        <el-form-item label="发送地址" prop="sendURL">
          <el-input v-model="form.sendURL"/>
        </el-form-item>
        <el-form-item label="日志地址" prop="logURL">
          <el-input v-model="form.logURL"/>
        </el-form-item>
        <el-form-item label="测试地址" prop="testURL">
          <el-input v-model="form.testURL"/>
        </el-form-item>
        <el-form-item label="验证地址" prop="checkURL">
          <el-input v-model="form.checkURL"/>
        </el-form-item>
        <el-form-item label="私钥" prop="priKey">
          <el-input v-model="form.priKey"/>
        </el-form-item>
        <el-form-item label="公钥" prop="pubKey">
          <el-input v-model="form.pubKey"/>
        </el-form-item>
        <el-form-item label="手动更新版本" prop="handVersion">
          <el-input v-model="form.handVersion"/>
        </el-form-item>
        <el-form-item label="自动更新版本" prop="autoVersion">
          <el-input v-model="form.autoVersion"/>
        </el-form-item>
        <el-form-item label="临时表更新版本" prop="updateVersion">
          <el-input v-model="form.updateVersion"/>
        </el-form-item>
        <el-form-item label="更新临时表" prop="updateTableFlag">
          <el-radio-group v-model="form.updateTableFlag">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="运行时环境" prop="jdkType">
          <template>
            <el-radio-group v-model="form.jdkType">
              <el-radio :label="0">SUN</el-radio>
              <el-radio :label="1">IBM</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="发送异常邮件" prop="sendEmailFlag">
          <template>
            <el-radio-group v-model="form.sendEmailFlag">
              <el-radio :label="0" >是</el-radio>
              <el-radio :label="1" >否</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="产品类型" prop="productType">
          <template>
            <el-select v-model="form.productType" placeholder="请选择产品类型">
              <el-option label="不含网销产品" value="0"></el-option>
              <el-option label="包含网销产品" value="1"></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="数据更新方式" prop="updatedType">
          <el-select v-model="form.updatedType" placeholder="请选择数据更新方式">
            <el-option label="手动式" value="0"></el-option>
            <el-option label="自动发送【推送】" value="1"></el-option>
            <el-option label="自动发送【拉动】" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件类型" prop="updateFileType">
          <el-select v-model="form.updateFileType" placeholder="请选择数据更新方式">
            <el-option label="XML属性式" value="0"></el-option>
            <el-option label="ZIP格式XML属性式" value="1"></el-option>
            <el-option label="XML节点式" value="2"></el-option>
            <el-option label="ZIP格式XML节点式" value="3"></el-option>
            <el-option label="SQL文件" value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible = false">取消</el-button>
        <el-button type="primary" @click.native="handleSubmit" :loading="formLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
  const rules = {
    name: [{
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }],
    sex: [{
      required: true,
      message: '请选择性别',
      trigger: 'change'
    }]
  }

  let data = () => {
    return {
      //页码
      page: 1,
      //每页数量
      size: 10,
      //总数
      total: 0,
      //查询条件
      filters: {},
      //页面数据
      rows: [],
      //页面载入状态
      pageLoading: false,
      //列表高度
      clientHeight: '100%',
      //表单数据
      form: {},
      //验证规则
      rules: rules,
      //对话框隐藏状态
      formVisible: false,
      //表单提交状态
      formLoading: false,
      mytest:true
    }
  }

  let handleAdd = function() {
    this.form = {}
    // this.form.sex = 1
    this.formVisible = true
  }

  let handleEdit = function(index, row) {
    this.form = Object.assign({}, row)
    // this.form.jdkType=0
    this.formVisible = true
  }

  let handleDelete = function(index, row) {
    if (this.pageLoading)
      return

    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.pageLoading = true
      this.$axios.get('/api/member/remove/' + row.id).then(res => {
        this.pageLoading = false
        if (!res.data.success) {
          this.$message({
            type: 'error',
            message: res.data.message
          })
          return
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.page = 1
        this.getRows()
      }).catch(e => this.pageLoading = false)
    }).catch(e => {})
  }

  let getRows = function() {
    if (this.pageLoading)
      return
    this.pageLoading = true

    let params = {
      page: this.page,
      size: this.size,
      query: this.filters.query
    }
    //调用post请求
    this.$axios.post('/api/customer/getPage', params).then(res => {
      this.pageLoading = false
      if (!res.data.records)
        return
      //总数赋值
      this.total = res.data.total
      this.page++;
      //页面元素赋值
      this.rows = res.data.records
    }).catch(e => this.pageLoading = false)
  }

  let handleSubmit = function() {
    if (this.formLoading)
      return

    this.$refs.form.validate(valid => {
      if (!valid)
        return

      this.formLoading = true

      //调用http协议
      this.$axios.post('/api/customer/save', this.form).then(res => {
        this.formLoading = false
        if (!res.data.success) {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          });
          return
        }
        this.$message({
          type: 'success',
          message: '保存成功!'
        })

        //重新载入数据
        this.page = 1
        this.getRows()
        this.formVisible = false
      }).catch(e => this.formLoading = false)
    })
  }

  let handleQuery = function() {
    this.page = 1
    this.getRows()
  }

  let handleCurrentChange = function(val) {
    this.page = val
    this.getRows()
  }

  let initHeight = function() {
    this.clientHeight = (document.documentElement.clientHeight - 258) + 'px'
  }

  export default {
    data: data,
    methods: {
      //查询
      handleQuery,
      //添加
      handleAdd,
      //修改
      handleEdit,
      //删除
      handleDelete,
      //页数改变
      handleCurrentChange,
      //获取分页
      getRows,
      //初始化高度
      initHeight,
      //提交数据
      handleSubmit
    },
    mounted: function() {
      window.addEventListener('resize', this.initHeight)
      this.initHeight()
      this.getRows()
    }
  }
</script>

<style scoped>
</style>
